<template>
  <el-row>
    <el-col :span="8">
      <!-- user卡片 -->
      <el-card>
        <el-row>
          <el-col :span="12">
            <el-image
              v-if="this.user.img != undefined"
              :src="this.user.img"
              style="width: 200px; height: 200px"
            ></el-image>
          </el-col>
          <el-col :span="4" :offset="8">
            <br /><br /><br />
            <span> {{ this.user.name }}</span>
            <el-divider></el-divider>
            <span>
              {{
                this.user.permissionLevel === 1
                  ? "管理员"
                  : user.permissionLevel === 0
                  ? "店员"
                  : ""
              }}</span
            >
          </el-col>
        </el-row>
      </el-card>
      <!-- table卡片 -->
      <el-card style="margin-top: 20px">
        <span style="display: block; text-align: center">员工销售额展示</span>
        <el-table :data="userOrderTable" style="width: 100%">
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column
            sortable
            prop="weekSale"
            label="本周销售额(元)"
            :formatter="rounding"
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="todaySale"
            label="本日销售额(元)"
            :formatter="rounding"
          >
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card
          v-for="item in CountData"
          :key="item.name"
          :body-style="{ display: 'flex', padding: 0 }"
        >
          <i
            class="icon"
            :class="`el-icon-${item.icon}`"
            :style="{ backgroundColor: item.color }"
          ></i>
          <div class="details">
            <p class="price">{{ item.value }}</p>
            <p class="desc">{{ item.name }}</p>
          </div>
        </el-card>
      </div>
      <!-- echarts图表 -->
      <div style="margin-left: 20px">
        <!-- 折线图 -->
        <el-card style="height: 280px">
          <!-- <div ref="echarts1" style="height: 280px">折线图</div> -->
          <div id="echart1" style="width: 900px; height: 280px"></div>
          <!-- <div ref="lineRef" id="line" class="whClass"></div> -->
        </el-card>
        <div class="graph">
          <!-- 柱状图 -->
          <el-card style="height: 280px">
            <div id="echart2" ref="echarts2" style="height: 280px">柱状图</div>
          </el-card>
          <!-- 饼状图 -->
          <el-card style="height: 320px">
            <div v-if="this.baseCategoryData!=''">
            <div id="echart3" style="height: 320px">饼状图</div>
        </div>
          </el-card>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import http from "../utils/request";
import * as echarts from "echarts";
export default {
  data() {
    return {
      user: {
        userId: "",
        img: "",
        name: "",
        permissionLevel: "",
      },
      userOrderTable: [],
      CountData: [],
      empList: [],
      orderThisWeek: [],
      baseCategoryData: "",
      monthData: [],
    };
  },
  methods: {
    getPie() {
      http.get(`/car/pie`).then(({ data }) => {
        this.baseCategoryData=data.data ;
        console.log(this.baseCategoryData);
      });
    },
    getLine() {
      http.get(`/order/line`).then(({ data }) => {
        this.monthData = data.data;
        console.log(this.monthData);
      });
    },
    getBar() {},
    rounding(row, column) {
      return parseFloat(row[column.property]).toFixed(2);
    },
    getData() {
      http.get(`/order/getdata`).then(({ data }) => {
        if (data.code == 1) {
          this.userOrderTable = data.data;
          this.orderThisWeek = this.userOrderTable.map((item) => item.weekSale);
          this.empList = this.userOrderTable.map((item) => item.name);
          console.log(this.orderThisWeek, this.empList);
        }
      });
    },
    getRenderer() {
      console.log(echarts);
      // 基于准备好的dom，初始化echarts实例
      let echart1d = echarts.init(document.getElementById("echart1"));
      let echart2d = echarts.init(document.getElementById("echart2"));
      let echart3d = echarts.init(document.getElementById("echart3"));
      // 配置参数
      let config1 = {
        title: { text: "近30日销售额统计" },
        tooltip: {},
        xAxis: {
          data: this.monthData.map((item) => item.date),
        },
        yAxis: {
          axisLabel: {
            formatter: "{value}", // 刻度值不包含单位
          },
          splitLine: {
            show: true, // 隐藏分割线
          },
          axisPointer: {
            show: true, // 隐藏指示线
          },
          name: "元", // 添加坐标轴名称
          nameGap: 10, // 坐标轴名称与刻度距离
          nameTextStyle: {
            // 坐标轴名称样式
            padding: [0, 0, 0, -10], // 调整位置
          },
          // type:'value',
          // axisLabel:{
          //     formatter:'{value}元'
          // }
        },
        series: [
          {
            name: "销量",
            type: "line",
            data: this.monthData.map((item) => item.daily_total),
          },
        ],
      };
      let config2 = {
        title: { text: "员工销售额统计" },
        tooltip: {},
        xAxis: {
          data: this.empList,
        },
        yAxis: {
          axisLabel: {
            formatter: "{value}", // 刻度值不包含单位
          },
          splitLine: {
            show: false, // 隐藏分割线
          },
          axisPointer: {
            show: false, // 隐藏指示线
          },
          name: "元", // 添加坐标轴名称
          nameGap: 10, // 坐标轴名称与刻度距离
          nameTextStyle: {
            // 坐标轴名称样式
            padding: [0, 0, 0, -10], // 调整位置
          },
          // type:'value',
          // axisLabel:{
          //     formatter:'{value}元'
          // }
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: this.orderThisWeek,
          },
        ],
      };
      let config3 = {
        title: { text: "热销商品分布" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.baseCategoryData,
            // [
            //   { value: 1048, name: "Search Engine" },
            //   { value: 735, name: "Direct" },
            //   { value: 580, name: "Email" },
            //   { value: 484, name: "Union Ads" },
            //   { value: 300, name: "Video Ads" },
            // ],
          },
        ],
      };
      // 设置参数
      echart1d.setOption(config1);
      echart2d.setOption(config2);
      echart3d.setOption(config3);
    },
    getUser() {
      this.user.userId = window.localStorage.getItem("userId");
      http.get(`/user/get/${this.user.userId}`).then(({ data }) => {
        this.user.name = data.data.name;
        this.user.permissionLevel = data.data.permissionLevel;
        this.user.img = data.data.avatar;
        console.log("接收数据", this.user.img);
      });
    },
    getCount() {
      http.get(`/order/count`).then(({ data }) => {
        this.CountData = data.data;
        console.log("接收数据", this.user.img);
      });
    },
    priceFormate(price) {
      return price;
    },
  },
  created() {
    this.getUser();
    this.getData();
    this.getCount();
    this.getBar();
    this.getLine();
    this.getPie();
  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    this.getRenderer();
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有 keep-alive 缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.user {
  // 垂直居中
  display: flex;
  align-items: center;

  // 外边距:分割线距离loginInfo的距离
  margin-bottom: 20px;
  // 内边距:分割线距离User的距离
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;

  img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-right: 40px;
  }

  .userInfo {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }
  }
}

.loginInfo {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 60px;
    }
  }
}

.num {
  display: flex;
  // 要换行
  flex-wrap: wrap;
  // 从头到尾均匀排列
  justify-content: space-between;
  margin-left: 20px;

  .el-card {
    width: 32%;
    margin-bottom: 20px;

    .icon {
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 30px;
      color: #fff;
    }

    .details {
      // 竖着排且居中
      display: flex;
      flex-direction: column;
      justify-content: center;

      margin-left: 15px;

      .price {
        font-size: 20px;
        margin-bottom: 10px;
        line-height: 30px;
        height: 30px;
      }

      .desc {
        font-size: 14px;
        color: #999;
        text-align: center;
      }
    }
  }
}

.graph {
  display: flex;
  // 两个靠边
  justify-content: space-between;
  margin-top: 20px;

  .el-card {
    width: 49%;
  }
}
</style>
